<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <script src="../libs/requirejs/require.min.js" data-main="../js/cart"></script>
</head>
<body>
  <h1>购物车</h1>
  <table border="1">
    <thead>
      <tr>
        <th>商品编号</th>
        <th>商品图片</th>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>选购数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody class="cart-body">
    </tbody>
    <tfoot>
      <tr>
        <td colspan="5">合计</td>
        <td colspan="2" class="total">0.00</td>
      </tr>
    </tfoot>
  </table>

  <!-- 定义购物车中商品行的模板 -->
  <script type="text/html" id="cart-template">
    {{if cart.length === 0}}
      <tr>
        <td colspan="7">购物车为空，请<a href="/">选购商品</a></td>
      </tr>
    {{else}}
      {{each cart}}
      <tr data-id="{{$value.id}}">
        <td>{{$value.id}}</td>
        <td><img src="{{$value.image}}" style="width: 64px; height: 64px;"></td>
        <td>{{$value.title}}</td>
        <td>{{$value.price}}</td>
        <td>
          <button class="minus">-</button>
          <span class="amount">{{$value.amount}}</span>
          <button class="plus">+</button>
        </td>
        <td class="sub">{{$value.price * $value.amount}}</td>
        <td><button class="del">删除</button></td>
      </tr>
      {{/each}}
    {{/if}}
  </script>
</body>
</html>